'use client'

import { 
  List, 
  ListItem, 
  Icon, 
  Box, 
  useColorModeValue 
} from '@chakra-ui/react'
import { FiFolder } from 'react-icons/fi'
import { DraggableItem } from './DraggableItem'

export interface Project {
  id: string;
  title: string;
}

interface ProjectListProps {
  projects: Project[];
  activeProjectId?: string;
  onSelectProject: (projectId: string) => void;
}

export const ProjectList = ({ 
  projects, 
  activeProjectId,
  onSelectProject 
}: ProjectListProps) => {
  const activeColor = useColorModeValue('red.50', 'red.900')
  const activeBorderColor = useColorModeValue('red.400', 'red.500')
  const hoverBgColor = useColorModeValue('gray.100', 'gray.700')
  
  return (
    <List spacing={1} px={3}>
      {projects.map((project) => {
        const isActive = project.id === activeProjectId
        
        return (
          <DraggableItem
            key={project.id}
            id={project.id}
            type="project"
            data={project}
          >
            <ListItem 
              p={2} 
              borderRadius="md" 
              bg={isActive ? activeColor : undefined}
              borderLeft={isActive ? "4px" : undefined}
              borderColor={isActive ? activeBorderColor : undefined}
              fontWeight={isActive ? "semibold" : "normal"}
              _hover={{ bg: !isActive ? hoverBgColor : undefined }}
              cursor="pointer"
              onClick={() => onSelectProject(project.id)}
              display="flex"
              alignItems="center"
            >
              <Icon as={FiFolder} mr={2} color={isActive ? 'red.500' : 'gray.500'} />
              {project.title}
            </ListItem>
          </DraggableItem>
        )
      })}
    </List>
  )
} 